<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2019/8/18
  Time: 21:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>患者展示信息</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
    <script type="text/html" id="table-gender">
        {{# if(d.patientSex=== 0) { }} <%-- // 可以用 === 来表示等于--%>
        女
        {{# } else if(d.patientSex=== 1) { }} <%--也可以用 == 来表示等于，效果相差不大--%>
        男
        {{# } else { }}
        保密
        {{# } }}
    </script>

    <script src="layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>

    <script type="text/javascript">
        layui.use('laydate',function () {
            var laydate=layui.laydate;
            laydate.render({
                elem: '#patientBirth'
                ,format: 'yyyy/MM/dd HH:mm:ss'
                ,lang: 'en'
            })
        })
        layui.use('table',function () {
            var table=layui.table;
            //第一个示例
            table.render({
                elem:"#myTable",//一般都是写id选择器
                url:"selectPatientByPage",//数据接口，请求地址
                page: true,//开启分页,

                toolbar:"#myToolbar",//id选择器的写法

                limit:10,
                limits:[10,20,30,40,50],
                title:"病人列表",
                //列
                cols:[[
                    {type:"checkbox"},
                    {title:"病人编号",field:"patientId"},
                    {title:"病人姓名",field:"patientName",},
                    {title:"病人性别",field:"patientSex",templet:"#table-gender"},
                    {title:"出生日期",field:"patientBirth"},
                    {title:"身份号码",field:"patientIdCard"},
                    {title:"病人地址",field:"patientAddress"},
                    {title:"病人电话",field:"patientMobile"},
                    {title:"执行操作",templet:"#caoZuo"},
                ]]
            });
        });
        layui.use(["form","layer","table"],function () {
            var form=layui.form;
            var layer = layui.layer;
            var table = layui.table;
            form.verify({
                name:function (value,item) {
                    /*var bookNameReg=/^\w{1,}$/;*/
                    var nameReg=/^\s*$/g;
                    if(nameReg.test(value)){
                        return "请输入正确姓名";
                    }
                },

            });
            //当点击提交按钮的时候，会进入到这个函数
            //当所有的验证都通过时，才会进入到这个函数
            form.on("submit(add)",function (data) {
                //console.log(data);
                $.ajax({
                   url:"insertPatient",
                   data:data.field,
                    type:"post",
                    success:function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll();
                        //2.添加提示成功
                        if(data.isInsert){
                            layer.alert("添加成功",{time:1500});
                        }else{
                            layer.alert("添加失败",{time:1500});
                        }
                        //3.刷新表单
                        table.reload("myTable");
                    }
                });
                return false;//阻止跳转；
            })
            form.on("submit(update)",function (data) {
                //console.log(data);
                $.ajax({
                        url:"updatePatient",
                    data:data.field,
                    type:"post",
                    success:function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll();
                        //2.添加提示成功
                        if(data.isUpdate){
                            layer.alert("更新成功",{time:1500});
                        }else{
                            layer.alert("更新失败",{time:1500});
                        }
                        //3.刷新表单
                        table.reload("myTable");
                    }
                });
                return false;//阻止跳转；
            })
        })
        //搜索操作
        function doSearch() {
            /*1.获取输入框输入的内容*/
            var patientName=jQuery("#name").val();
            //alert("name");
            /*发送请求，并且接收数据*/
            layui.use('table',function () {
                var table=layui.table;
                table.reload('myTable',{
                    where:{"aa":patientName}
                });
            });
        }
        function toOpenAddLayer() {
            $("#id").val(0);
            $("#updateSubmitBtn").hide();
            $("#addSubmitBtn").show();
            layui.use('layer',function () {
                layer.open({
                    title:"添加用户",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                });
            });
        }
        function toOpenUpdateLayer(patientId) {
            //alert(id)
            //1.获取当前行数据===》发送ajax请求，获取当前行数据
            $.ajax({
                url:"selectOnePatient",
                data:"patientId="+patientId,
                success:function(data){
                    $("#patientId").val(data.patientId);
                    $("#patientName").val(data.patientName);
                    $("#patientSex").val(data.patientSex);
                    $("#patientBirth").val(data.patientBirth);
                    $("#patientIdCard").val(data.patientIdCard);
                    $("#patientAddress").val(data.patientAddress);
                    $("#patientMobile").val(data.patientMobile);
                }
            })
            $("#addSubmitBtn").hide();
            $("#updateSubmitBtn").show();
            //2.把数据填充到修改弹出层中==>弹出层显示
            layui.use('layer',function () {
                layer.open({
                    title:"修改用户信息",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                })
            })
            //3.提交表单

            //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table
        }
        //移除的ajax请求
        function doRemove(patientId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'],function () {
                var table=layui.table;
                layer.confirm('确定删除？',{icon: 3, title:'确认删除'},function (index) {
                    $.ajax({
                       url:"delete",
                        data:"id="+patientId,
                        success:function (data) {
                            layer.alert(data.isDelete,{time:1000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    });
                })
            });

        }
        function doMultiRemove() {
            //获取到选中的内容的id===》table模块中找方法
            layui.use(['layer','table'],function () {
                var table=layui.table;
                //获取到选中的数据
                var checkStatus=table.checkStatus('myTable')//idTest 即为基础参数 id 对应的值
                //console.log(checkStatus.data) //获取选中行的数据
                var data=checkStatus.data;
                if(data.length==0){
                    layer.alert("请添加要删除的内容");
                }else{
                    layer.confirm("确定要删除所选择的数据吗？",function (index) {
                        //把所有选中的数据的id封装到一个数组中
                        var ids=new Array(data.length);
                        for(var i=0;i<ids.length;i++){
                            ids[i]=data[i].patientId;
                        }
                        //执行删除操作
                        $.ajax({
                            url:"multiRemove",
                            data:"patientIds="+ids,
                            success:function (data) {
                              layer.close(index);
                              layer.alert(data.isMultiRemove,{time:1000});
                              table.reload("myTable");
                            }
                        })
                    })
                }
            })
        }
    </script>

    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.patientId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" onclick="doRemove('{{d.patientId}}')">删除</button>
    </script>
</head>
<body>

    <table id="myTable"></table>


    <div id="myToolbar" style="display: none;">
            <button type="button" class="layui-btn layui-btn-radius" onclick="toOpenAddLayer()">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
            <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger" onclick="doMultiRemove()">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
            <div class="layui-inline">
                <label class="layui-form-label">患者姓名</label>
                <div class="layui-input-inline" style="width: 230px;">
                    <input type="text" class="layui-input" id="name">
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="doSearch()">
                        <i class="layui-icon layui-icon-search" ></i> 搜索
                    </button>
                </div>
            </div>
    </div>
    <form id="addForm" style="display: none" class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label">患者编号</label>
            <div class="layui-input-block">
                <input name="patientId" id="patientId" class="layui-input" value="0" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者姓名</label>
            <div class="layui-input-block">
                <input name="patientName" id="patientName" class="layui-input" placeholder="请输入想添加的用户的名字" <%--lay-verify="required|name"--%>>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">患者性别</label>
            <div class="layui-input-block">
                <input name="patientSex" id="patientSex" class="layui-input" placeholder="请输入用户的日期">
            </div>
        </div>
        <%--<div class="layui-form-item">
            <label class="layui-form-label">患者生日</label>
            <div class="layui-input-block">
                <input name="patientBirth" id="patientBirth" class="layui-input" placeholder="请输入用户的日期" >
            </div>
        </div>--%>

        <div class="layui-inline">
            <label class="layui-form-label">患者生日</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="patientBirth" id="patientBirth" type="text" placeholder="yyyy/MM/dd">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份号码</label>
            <div class="layui-input-block">
                <input name="patientIdCard" id="patientIdCard" class="layui-input" placeholder="请输入用户的日期" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者地址</label>
            <div class="layui-input-block">
                <input name="patientAddress" id="patientAddress" class="layui-input" placeholder="请输入用户的日期" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">患者电话</label>
            <div class="layui-input-block">
                <input name="patientMobile" id="patientMobile" class="layui-input" placeholder="请输入用户的日期" >
            </div>
        </div>
        <div class="layui-form-item">
            <button lay-submit type="button" lay-filter="add" class="layui-btn" id="addSubmitBtn">添加患者信息</button>
            <button lay-submit type="button" lay-filter="update" class="layui-btn" id="updateSubmitBtn">修改患者信息</button>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>


</body>
</html>
